<template>

  <!-- div容器用来渲染echarts控件 -->
  <div id="main" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import { request } from '../utils/request';
// import axios from "axios";
import { getCurrentInstance } from "vue";
const axios = getCurrentInstance().proxy.axios;
//定义函数统计客户地区分布
function countCustomerArea(){
  //发送ajax请求，获得统计数据
  request({
    url: "http://localhost:8081/countCust",
    method: 'get'
  })
      .then((response)=>{

        //响应成功渲染图表
        var custDom = document.getElementById('main');
        var custChart = echarts.init(custDom);
        var option = {
          title: {
            text: '客户地区分布统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '客户分布',
              type: 'pie',
              radius: [20, 140],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5
              },
              data:response.data
            }
          ]
        };

        option && custChart.setOption(option);

      })
      .catch((error)=>{
        console.log(error);
      })

}
//加载视图调用函数
onMounted(function(){
  countCustomerArea();
})
</script>

<style scoped>

</style>